<template>
  <div class="table-content" ref="tableContent">
    <div class="top">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-position="right"
      >
        <div class="queryList" v-for="(item, index) in queryList" :key="index">
          <el-form-item :label="item.queryDes" v-if="item.queryMode === 'input'">
            <el-input
              v-model="formInline[item.queryField]"
              :placeholder="'请输入' + item.queryDes"
              size="small"
              clearable
            />
          </el-form-item>
          <el-form-item :label="item.queryDes" v-if="item.queryMode === 'tree'">
            <el-cascader
              v-model="formInline[item.queryField]"
              size="small"
              clearable
              :placeholder="'请选择' + item.queryDes"
              :options="cascaderOptions"
              :props="cascaderProps"
            />
          </el-form-item>
          <el-form-item :label="item.queryDes" v-if="item.queryMode === 'select'">
            <selectTree :selectDictType="selectDictType" :queryDes="item.queryDes" :formInline="formInline" :queryField="item.queryField" @selectChanges="selectChanges" ref="selectTree"/>
          </el-form-item>
        </div>
        <el-button
          size="small"
          style="height: 30px"
          type="primary"
          @click="search"
          >查询</el-button
        >
        <el-button size="small"
          style="height: 30px"
          type="primary"
          @click="reset"
          >重置</el-button
        >
      </el-form>
      <i class="el-icon-close" @click="handleClose"></i>
      <div style="height: 80%;">
        <el-table
          class="table"
          :data="tableData"
          @row-click="rowClick"
          style="width: 100%"
        >
          <el-table-column
            v-for="(item, index) in tableHeaderList"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :show-overflow-tooltip="true"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="bottom">
      <p class="title">数据列表</p>
      <el-table
        class="table table-list"
        style="width: 100%"
        :data="tableDataList">
        <el-table-column
          prop="name"
          label="类型"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="value"
          label="数量"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
      </el-table>
      <p class="title">数据统计</p>
      <div id="pieEcharts"></div>
    </div>
  </div>
</template>

<script>
import selectTree from './selectTree.vue'
import * as API from '../../api/resourceManagement/index'
export default {
  components: { selectTree },
  props: {
    isShowDetailTable: {
      type: Boolean,
      default: false
    },
    tableDatas: {
      type: Object,
      default: () => {}
    },
    pieData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selectDictType: [],
      tableDataList: [{}],
      keywords: '',
      tableData: this.tableDatas.records,
      tableHeaderList: this.tableDatas.tableHeaders,
      currentPage: 1,
      pageSize: 10,
      formInline: {},
      total: this.tableDatas.total,
      cascaderOptions: [],
      cascaderProps: { checkStrictly: true, label: 'label', value: 'label' },
      selectOptions: [],
      queryList: this.tableDatas.queryList,
      queryFormList: [],
      obj: {}
    }
  },
  watch: {
    isShowDetailTable(val) {
      const tableContent = this.$refs.tableContent
      if (val) {
        tableContent.style.transform = 'translateX(0)'
      } else {
        tableContent.style.transform = 'translateX(578px)'
      }
    },
    tableDatas(val) {
      this.tableData = val.records
      this.tableHeaderList = val.tableHeaders
      this.total = val.total
      this.queryList = val.queryList
      this.getAreaTreeselect()
      if (val.queryList && val.queryList.length > 0) {
        this.getDictDataTtpe(val.queryList)
      }
    },
    pieData(val) {
      this.tableListHeaderList = []
      this.tableDataList = val.seriesData
      this.getPie(val.seriesData)
    },
    deep: true
  },
  mounted() {},
  methods: {
    getPie(seriesData) {
      const myEcharts = this.$echarts.init(document.getElementById('pieEcharts'))
      myEcharts.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#FFFFFF'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            data: seriesData
          }
        ]
      })
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    },
    rowClick(row, column, event) {
      this.$emit('rowClick', row)
    },
    // 行政区划
    getAreaTreeselect() {
      API.areaTreeselect().then((res) => {
        if (res.code === 200) {
          this.cascaderOptions = res.data
        }
      })
    },
    getDictDataTtpe(val) {
      this.selectDictType = []
      // const dictType = []
      val.forEach((item, index) => {
        if (item.dicType) {
          const key = item.queryDes
          const value = item.dicType
          this.selectDictType.push({ key: key, value: value })
        }
      })
      // let dictType = null
      // if (this.queryList && this.queryList.length > 0) {
      //   this.queryList.forEach((item) => {
      //     if (item.dicType) {
      //       dictType = item.dicType
      //     }
      //   })
      //   if (dictType) {
      //     API.dictDataTtpe(dictType).then((res) => {
      //       if (res.code === 200) {
      //         this.selectOptions = res.data
      //       }
      //     })
      //   }
      // }
    },
    selectChanges(data) {
      this.formInline[data.id] = data.value
    },
    // 搜索
    search() {
      if (this.queryList && this.queryList.length > 0) {
        this.queryFormList = []
        this.queryList.forEach((item) => {
          for (const key in this.formInline) {
            if (key === item.queryField) {
              this.queryFormList.push({
                'fieldValue': Array.isArray(this.formInline[key]) ? this.formInline[key][this.formInline[key].length - 1] : this.formInline[key],
                'queryField': key,
                'queryType': item.queryType
              })
            }
          }
        })
        this.obj.queryFormList = this.queryFormList
        this.$emit('changeTableData', this.obj)
      }
    },
    reset() {
      this.queryFormList = []
      this.formInline = {}
      this.obj.queryFormList = this.queryFormList
      this.$emit('changeTableData', this.obj)
      this.$nextTick(() => {
        this.$refs.selectTree.forEach(item => {
          item.reset()
        })
      })
    },
    handleClose() {
      this.$emit('handleClose')
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      console.log(`每页 ${val} 条`)
      this.obj.currentPage = this.currentPage
      this.obj.pageSize = this.pageSize
      this.$emit('changeTableData', this.obj)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.obj.currentPage = this.currentPage
      this.obj.pageSize = this.pageSize
      this.$emit('changeTableData', this.obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.table-content {
  width: 28%;
  height: 87%;
  position: absolute;
  z-index: 1;
  right: 5px;
  top: 85px;
  background: rgba(3, 27, 54, 0.7);
  padding: 10px;
  transform: translateX(578px);
  transition: transform 0.6s ease; /* Adjust the transition speed */
  .input-with-select {
    width: 40%;
    margin: 10px 0;
  }
  .el-icon-close {
    float: right;
    font-size: 0.24rem;
    line-height: 0.44rem;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 0;
    top: 10px;
  }
  .pagination {
    margin-top: 10px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 20px;
  }
  .top{
    height: 50%;
  }
  .bottom{
    height: 50%;
    .title{
      color: #fff;
    }
    #pieEcharts{
      width: 100%;
      height: 1.96rem;
    }
  }
}
/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: #c9e9ff;
  height: 30px;
}
:deep(.el-table__body-wrapper) {
  max-height: 140px;
  overflow: auto;
}
:deep(.el-table thead) {
  color: #7ec1ff;
  font-size: 14px;
}
:deep(.el-table--enable-row-hover) {
  background-color: transparent;
}
:deep(.el-table .warning-row) {
  background: rgba(51, 91, 127, 0.6);
}

:deep(.el-table tbody tr:hover > td) {
  background: rgba(51, 91, 127, 0.4) !important;
}
:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  display: none;
}
:deep(.el-pagination button:disabled) {
  background: linear-gradient(135deg, #2270d4 0%, #002689 100%);
}
:deep(.el-pager li) {
  background: none;
  color: #fff;

}
:deep(.el-pager){
  .active{
    color: #027db4;
  }
}
:deep(.el-pagination__total) {
  color: #7ec1ff;
}
.inputbtn {
  background: linear-gradient(135deg, #2270d4 0%, #002689 100%);
  border-radius: 0px 4px 4px 0px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-input-group__append) {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  width: 40px;
  height: 40px;
  padding: 0px;
}
.demo-form-inline {
  display: flex;
  height: 20%;
  overflow: auto;
  flex-wrap: wrap;
  align-items: center;
  .queryList {
    height: 0.4rem;
  }
  :deep(.el-form-item__content) {
    width: 110px;
  }
  :deep(.el-form-item__label) {
    color: #fff;
  }
  :deep(.el-input__inner) {
    height: 0.3rem;
    color: #fff;
  }
}
.table-list{
  height: 140px;
  :deep(.el-table__body-wrapper) {
    max-height: 1.34rem;
    overflow: auto;
  }
}
</style>
